<template>
  <!-- 背景图片 -->
  <img :src="musiclist.al.picUrl" alt="" class="bgImg" />
  <!-- 歌曲详情 头部 -->
  <div class="detailTop">
    <!-- 头部左边 -->
    <div class="detailTopLeft">
      <svg
        class="icon"
        aria-hidden="true"
        @click="detailShowAndClearDurantion"
        style="float: left; margin: 0 0.3rem 0 0.1rem; fill: #fff"
      >
        <use xlink:href="#icon-zuojiantou"></use>
      </svg>
      <div class="authorAndMusicName">
        <Vue3Marquee style="color: #fff">{{ musiclist.name }}</Vue3Marquee>
        <div class="authorAndImg" v-if="musiclist.ar">
          <span
            v-for="person in musiclist.ar"
            :key="person.id"
            class="author"
            >{{ person.name }}</span
          >
        </div>
      </div>
    </div>
    <!-- 头部右边 -->
    <van-share-sheet
      v-model:show="showShare"
      title="立即分享给好友"
      :options="options"
    />
    <div class="detailTopRight" @click="shareMusic">
      <svg
        class="icon"
        aria-hidden="true"
        style="fill: #fff; margin-right: 0.1rem"
      >
        <use xlink:href="#icon-fenxiang"></use>
      </svg>
    </div>
  </div>
  <!-- 歌曲详情 中间磁盘播放-->
  <div class="detailContent" v-if="!isLyricShow" @click="getMusicLyric">
    <img
      src="@/assets/needle-ab.png"
      alt=""
      class="img_needle"
      :class="{ img_needle_active: !isbtnShow }"
    />
    <img src="@/assets/cd.png" alt="" class="img_cd" />
    <img
      :src="musiclist.al.picUrl"
      alt=""
      class="img_music"
      :class="!isbtnShow ? 'img_music_active' : 'img_music_paused'"
    />
  </div>
  <!-- 歌曲详情 中间歌词展示-->
  <div
    class="lyricContent"
    v-else
    @click="isLyricShow = false"
    ref="musicScroll"
  >
    <p
      :ref="
        currentTime * 1000 > item.CurrentSingSongTime &&
        currentTime * 1000 < item.pre
          ? 'pActive'
          : ''
      "
      v-for="item in Onelyric"
      :key="item"
      :class="{
        active:
          currentTime * 1000 > item.CurrentSingSongTime &&
          currentTime * 1000 < item.pre,
      }"
    >
      {{ item.lrc }}
    </p>
  </div>
  <!-- 歌曲详情 底部 -->
  <div class="detailFooter">
    <!-- 底部 头部 -->
    <div class="footerTop">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-aixin"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xiazai1"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-yinle"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-pinglun2"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-liebiao"></use>
      </svg>
    </div>
    <!-- 底部 播放进度条 -->
    <div class="footerContent">
      <input
        type="range"
        class="range"
        min="0"
        :max="$store.state.duration"
        v-model="currentTime"
        step="0.05"
      />
    </div>
    <!-- 底部 播放暂停 -->
    <div class="footer">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xunhuanbofang"></use>
      </svg>
      <!-- 上一首 -->
      <svg class="icon" aria-hidden="true" @click="preMusic">
        <use xlink:href="#icon-shangyishoushangyige"></use>
      </svg>
      <!-- 播放 -->
      <svg class="icon" aria-hidden="true" @click="play" v-if="isbtnShow">
        <use xlink:href="#icon-bofang"></use>
      </svg>
      <!-- 暂停 -->
      <svg class="icon" aria-hidden="true" @click="play" v-else>
        <use xlink:href="#icon-bofang1"></use>
      </svg>
      <!-- 下一首 -->
      <svg class="icon" aria-hidden="true" @click="nextMusic">
        <use xlink:href="#icon-xiayigexiayishou"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-gedan1"></use>
      </svg>
    </div>
  </div>
</template>

<script>
//引入跑马灯  完成歌曲名循环滚动  Vue3Marquee组件 需要网络下载
import { Vue3Marquee } from "vue3-marquee";
import "vue3-marquee/dist/style.css";
import { ref, computed, watch, nextTick } from "vue";
import { useStore } from "vuex";

export default {
  props: ["musiclist", "play", "isbtnShow", "getMusicDuration"],
  components: {
    Vue3Marquee,
  },
  setup(props) {
    let timer2 = 0;
    //获取 DOM元素
    let musicScroll = ref(null);

    //获取 带active样式的p标签 DOM元素
    let pActive = ref(null);

    //数据  决定歌词是否显示
    let isLyricShow = ref(false);

    //决定是否展示分享页
    let showShare = ref(false);
    //分享页数据
    let options = [
      [
        { name: "微信", icon: "wechat" },
        { name: "朋友圈", icon: "wechat-moments" },
        { name: "微博", icon: "weibo" },
        { name: "QQ", icon: "qq" },
      ],
      [
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
        { name: "小程序码", icon: "weapp-qrcode" },
      ],
    ];

    //从vuex获取数据
    let $store = useStore();

    //获取歌曲当前播放时间点
    let currentTime = computed(() => $store.state.currentTime);

    //方法 触发vuex保存歌词
    function getMusicLyric() {
      $store.dispatch(
        "getMusicLyric",
        $store.state.playlist[$store.state.playlistIndex].id
      );
      isLyricShow.value = true;

      //当歌曲播放若干时间后 滚动条依然在active附近
      nextTick(() => {
        if (
          pActive.value !== null &&
          pActive.value[0] &&
          pActive !== {} &&
          pActive.value[0].offsetTop > 300
        ) {
          musicScroll.value.scrollTop = pActive.value[0].offsetTop - 300;
        }
      });
    }

    //方法 切换上一首歌曲
    function preMusic() {
      clearTimeout(timer2);
      timer2 = setTimeout(() => {
        //当索引大于等于0时 切换上一首歌曲
        if ($store.state.playlistIndex - 1 >= 0) {
          $store.commit("PREANDNEXTMUSICPLAY", $store.state.playlistIndex - 1);
        } else {
          //当索引小于0时 切换第一首歌曲
          $store.commit("PREANDNEXTMUSICPLAY", 0);
        }
        props.getMusicDuration();
      }, 300);
    }

    //方法 切换下一首歌曲
    function nextMusic() {
      clearTimeout(timer2);
      timer2 = setTimeout(() => {
        if (
          $store.state.playlist.length != 1 &&
          $store.state.playlistIndex + 1 !== $store.state.playlist.length - 1
        ) {
          $store.commit("PREANDNEXTMUSICPLAY", $store.state.playlistIndex + 1);
        } else {
          //当索引等于playlist中存储歌曲最后一首时 切换最后一首歌曲
          $store.commit("PREANDNEXTMUSICPLAY", 0);
        }
        props.getMusicDuration();
      }, 300);
    }

    //方法 隐藏歌曲详情
    function detailShowAndClearDurantion() {
      $store.commit("UPDATEDETAILSHOW", false);
      // $store.commit("GETDURATION", 0);
    }

    //方法 点击 分享音乐
    function shareMusic() {
      showShare.value = true;
    }

    //从vuex获取歌词
    let ric = computed(() => $store.state.lyricList);

    //对歌词进行处理
    let Onelyric = computed(() => {
      let arr = [];
      if (ric) {
        //循环切割数据
        arr = (ric.value.lyric || "").split(/[(\r\n)\r\n]+/).map((item, i) => {
          //切割分钟
          // let min = item.slice(1, 3);
          let min = item.slice(item.indexOf("[") + 1, item.indexOf(":"));
          //切割秒
          let sec = item.slice(item.indexOf(":") + 1, item.indexOf("."));
          //切割毫秒
          let mill = item.slice(item.indexOf(".") + 1, item.indexOf("]"));
          //切割歌词
          let lrc = item.slice(item.indexOf("]") + 1, item.length);
          //当前唱歌时间
          let CurrentSingSongTime =
            parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);
          return { min, sec, mill, lrc, CurrentSingSongTime };
        });
      }
      //循环 获取下一局歌词时间
      arr.forEach((item, i) => {
        if (i === arr.length - 1 || isNaN(arr[i + 1].CurrentSingSongTime)) {
          item.pre = 10000000;
        } else {
          item.pre = arr[i + 1].CurrentSingSongTime;
        }
      });
      return arr;
    });

    //监听 currentTime
    watch(currentTime, (newv) => {
      //通过观察错误 获得满足的条件 进行控制滚动条
      if (
        pActive.value !== null &&
        pActive.value[0] &&
        pActive !== {} &&
        pActive.value[0].offsetTop > 300
      ) {
        musicScroll.value.scrollTop = pActive.value[0].offsetTop - 300;
      }
      if (!isNaN($store.state.duration)) {
        if (newv == $store.state.duration) {
          nextMusic();
        }
      } else {
        props.getMusicDuration();
      }
    });

    return {
      isLyricShow,
      getMusicLyric,
      ric,
      Onelyric,
      currentTime,
      musicScroll,
      pActive,
      preMusic,
      nextMusic,
      detailShowAndClearDurantion,
      shareMusic,
      showShare,
      options,
    };
  },
};
</script>

<style lang="less" scoped>
.bgImg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  filter: blur(1rem);
}
.detailTop {
  display: flex;
  justify-content: space-between;
  margin-top: 0.2rem;
  .detailTopLeft {
    .authorAndMusicName {
      float: right;
      display: flex;
      flex-direction: column;
      width: 2rem;
      .authorAndImg {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        .author {
          font-size: 0.2rem;
          color: rgb(112, 115, 119);
        }
      }
    }
  }
}
.detailContent {
  width: 100%;
  height: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .img_needle {
    width: 2rem;
    height: 3rem;
    position: absolute;
    left: 46%;
    transform-origin: 0 0;
    transform: rotate(-13deg);
    transition: all 2s;
  }
  //动态样式 旋转磁针
  .img_needle_active {
    width: 2rem;
    height: 3rem;
    position: absolute;
    left: 46%;
    transform-origin: 0 0;
    transform: rotate(1deg);
    transition: all 2s;
  }
  .img_cd {
    width: 5rem;
    height: 5rem;
    position: absolute;
    bottom: 2.3rem;
    z-index: -1;
  }
  .img_music {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    position: absolute;
    bottom: 3.14rem;
    //动画
    animation: rotate_cd 10s linear infinite;
  }
  //启动运行样式
  .img_music_active {
    animation-play-state: running;
  }
  //暂停运行样式
  .img_music_paused {
    animation-play-state: paused;
  }
  // 动画 绕y轴旋转 cd
  @keyframes rotate_cd {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }
}
.detailFooter {
  width: 100%;
  display: flex;
  flex-direction: column;
  .footerTop {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 0.4rem;
    .icon {
      fill: #fff;
    }
  }
  .footerContent {
    margin: 0.4rem 0 0;
    .range {
      width: 100%;
      height: 0.06rem;
    }
  }
  .footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 0.4rem;
    .icon {
      fill: #fff;
    }
    .icon:nth-child(3) {
      width: 1rem;
      height: 1rem;
    }
  }
}
.lyricContent {
  width: 100%;
  height: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
  p {
    color: #999;
    margin-bottom: 0.3rem;
    font-size: 0.25rem;
  }
  .active {
    color: #fff;
    font-size: 0.3rem;
  }
}
</style>